<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" th:href="@{layui/css/layui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{layui/layui_ext/dtree/dtree.css}">
    <link rel="stylesheet" type="text/css" th:href="@{layui/layui_ext/dtree/font/dtreefont.css}">
</head>
<body>
<ul id="demoTree1" class="dtree" data-id="-1"></ul>
<div id="test1" class="dtree" data-id="-1"></div>

</body>
<script type="text/javascript" th:src="@{layui/layui.js}"></script>
<script type="text/javascript" th:src="@{layui/layui_ext/dtree/dtree.js}"></script>
<script>
    layui.use(['layer', 'form', 'table', 'util','dtree','tree'], function(){
        var layer = layui.layer;
        var dtree = layui.dtree;
        var tree = layui.tree;
        // var inst1 = tree.render({
        //     elem: '#test1', //绑定元素
        //         url:"/listAlbumtype",
        //         dataStyle: "layuiStyle",  //使用layui风格的数据格式
        //         dataFormat: "list",  //配置data的风格为list
        //         response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
        //         checkbar:true, //开启复选框
        //         line:true,
        //         width:'100%',
        //         initLevel:3
        // });
        dtree.render({
            elem: "#demoTree1",  //绑定元素
            url:"/listAlbumtype",
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            dataFormat: "list",  //配置data的风格为list
            response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
            checkbar:true, //开启复选框
            line:true,
            width:'100%',
            initLevel:3

        });

        //单击节点 监听事件
        dtree.on("node('demoTree1')" ,function(param){
            layer.msg(JSON.stringify(param));
        });
    });
</script>

</html>